<template>
  <div class="table">
    <div class="content-common">
      <el-form :label-position="'right'" :inline="true" :model="query">
        <el-form-item label="测站名称">
          <el-input v-model="query.stnm" placeholder="测站名称"></el-input>
        </el-form-item>
        <el-form-item label="所属县">
          <el-input v-model="query.county" placeholder="所属县"></el-input>
        </el-form-item>

        <el-form-item label="">
          <el-button
            type="primary"
            icon="search"
            @click="
              page.currentPage = 1;
              getData();
            "
            >查询</el-button
          >
          <el-button type="primary" icon="plus" @click="handleAdd()"
            >新增</el-button
          >
        </el-form-item>
      </el-form>

      <el-table :data="tableData" class="table-common"
			    header-cell-class-name="table-header" border>
        <el-table-column
          align="center"
          prop="stnm"
          label="测站名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="county"
          label="所属县"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="站址"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="监测内容"
        ></el-table-column>
        <el-table-column align="center" prop="devices" label="监测设备">
          <template #default="scope">
            <el-popconfirm :title="scope.row.devices">
              <span>{{ scope.row.devices }}</span>
            </el-popconfirm>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="blockNum"
          label="小区数量"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="garrisonNum"
          label="驻守人数"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="longitude"
          label="经度"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="latitude"
          label="纬度"
        ></el-table-column>

        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination
          background
          v-model:currentPage="page.currentPage"
          @current-change="getData"
          layout="prev,total, pager, next"
          :total="page.totalSize"
        >
        </el-pagination>
      </el-row>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="logTitle" v-model="editVisible" width="600px">
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="top"
      >
        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="测站名称">
              <el-input style="width:90%" v-model="form.stnm" placeholder="测站名称"></el-input>
            </el-form-item>
          </el-col>
		  <el-col :span="8">
		    <el-form-item label="测站编号">
		      <el-input style="width:90%" v-model="form.stcd" placeholder="测站编号"></el-input>
		    </el-form-item>
		  </el-col>
         <el-col :span="8">
           <el-form-item label="所属县">
             <el-input style="width:90%" v-model="form.county" placeholder="所属县"></el-input>
           </el-form-item>
         </el-col>
        </el-row>

        

        <el-row type="flex" justify="space-between">
			<el-col :span="8">
			  <el-form-item label="站址">
			    <el-input style="width:90%" v-model="form.address" placeholder="站址"></el-input>
			  </el-form-item>
			</el-col>
          <el-col :span="8">
            <el-form-item label="监测设备">
              <el-input
			  style="width:90%"
                v-model="form.devices"
                placeholder="监测设备"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="小区数量">
			  
              <el-input
			  style="width:90%"
                v-model="form.blockNum"
                placeholder="小区数量"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="纬度">
              <el-input style="width:90%" v-model="form.latitude" placeholder="纬度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经度">
              <el-input style="width:90%" v-model="form.longitude" placeholder="经度"></el-input>
            </el-form-item>
          </el-col>
		  <el-col :span="8">
		    <el-form-item label="驻守人数">
		      <el-input
			  style="width:90%"
		        v-model="form.garrisonNum"
		        placeholder="驻守人数"
		      ></el-input>
		    </el-form-item>
		  </el-col>
        </el-row>

        

        <el-row type="flex" justify="space-between">
			<el-col :span="8">
			  <el-form-item label="测站类型">
			    <el-select style="width:90%" v-model="form.stType" placeholder="请选择">
			      <el-option label="径流小区" :value="1"></el-option>
			      <el-option label="小流域" :value="2"></el-option>
			    </el-select>
			  </el-form-item>
			</el-col>
          <el-col :span="8">
            <el-form-item label="观测员">
              <el-select style="width:90%" v-model="form.observer" filterable placeholder="请选择">
                  <el-option
                v-for="item in globalUser"
                :key="item.userNo"
                :label="item.username"
                :value="item.userNo">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计算人">
              <el-select style="width:90%" v-model="form.calculator" filterable placeholder="请选择">
                  <el-option
                v-for="item in globalUser"
                :key="item.userNo"
                :label="item.username"
                :value="item.userNo">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row type="flex" justify="space-between">
          <el-col :span="8">
            <el-form-item label="审核人">
              <el-select style="width:90%" v-model="form.reviewer" filterable placeholder="请选择">
                <el-option
                v-for="item in globalUser"
                :key="item.userNo"
                :label="item.username"
                :value="item.userNo">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
         
		  <el-col :span="8">
		    <el-form-item label="监测内容">
		      <el-input
			  style="width:90%"
		        v-model="form.content"
		        placeholder="监测内容"
		      ></el-input>
		    </el-form-item>
		  </el-col>
		  <el-col :span="8">
		    <el-form-item label="备注">
		      <el-input style="width:90%" v-model="form.remark" placeholder="备注"></el-input>
		    </el-form-item>
		  </el-col>
        </el-row>
		
		<el-row type="flex" justify="space-between">
		
		 
		  
		  
		 <el-col :span="8">
		   <el-form-item label="站点图片">
		 				<el-upload
		 				:headers="headers"
		 					:on-success="handleAvatarSuccess"
		 					v-model:file-list="fileList"
		 					:show-file-list="false"
		 					:action="shangchuanUrl"
		 					:limit="1"
		 					
		 				  >
		 					<el-button type="primary">点击上传</el-button>
		 					<template #tip>
		 					  <div class="el-upload__tip">
		 						
		 					  </div>
		 					</template>
		 				  </el-upload>
		   </el-form-item>
		 </el-col>
		  
		 
		
		</el-row>
		<div>
			
			<img style="width:100%" :src="showurl" alt="">
			
		</div>
		
		
		
      </el-form>

      <template #footer>
          <span  class="dialog-footer">
              
              <el-button type="primary" @click="saveEdit">确 定</el-button>
          </span>
      </template>
     
    </el-dialog>
  </div>
</template>

<script>
import {
  viewPageStationInfo,
  stationsavesaveStationInfo,
  stationremovedelStation,
} from "../../../api/index";

export default {
  name: "stationlist",
  data() {
    return {
		headers: {
		  Authorization: sessionStorage['token']
		},
		showurl:'',
		shangchuanUrl:'',
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0,
      },
      query: {
        tm: [],
        stname: "",
      },
      formInline: {},
      tableData: [],
      editVisible: false,
      logTitle: "",
      pageTotal: 0,
      form: {},
	  fileList:[]
    };
  },
  created() {
	  this.shangchuanUrl=globalVar.jingliujiangyuUrl+'/soil/water/sys/file/create/singleFileUpload'
    this.globalUser=globalUser
    let that = this;
    that.getData();
  },
  methods: {
	  handleAvatarSuccess(val){
		  
		  this.showurl='http://120.203.64.203:5888/stbc_static/'+val.object.fileUrl
		  this.fileList=[]
		  this.form.images=val.object.fileUrl
	  },
    getData() {
      let data = {
        currentPage: this.page.currentPage,
        pageSize: 10,
        stnm: this.query.stnm,
        county: this.query.county,
        stcd:stationInfo.stcd
      };
      viewPageStationInfo(data).then((res) => {
        this.tableData = res.object.dataList;

        this.page = res.object.page;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },
    // 删除操作
    handleDelete(row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          stationremovedelStation([row.id]).then((e) => {
            this.$message.success("删除成功");
            this.getData();
          });
        })
        .catch(() => {});
    },

    // 编辑操作
    handleEdit(row) {
	this.showurl='http://120.203.64.203:5888/stbc_static/'+row.images
      this.form = row;

      this.logTitle = "编辑测站";

      this.editVisible = true;
    },
    handleAdd() {
      this.logTitle = "新增测站";
      this.form = {};
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      let that = this;

      stationsavesaveStationInfo(that.form).then((e) => {
        this.editVisible = false;
        this.$message.success("操作成功");
        this.getData();
      });
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
